<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box {
            width: 170px;
            height: 170px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>
    </div>
    <template id="parent">
        <div>
            <h2 ref="one">I am parent 父组件</h2>
            <h2>word --- {{word}}</h2>
            <h2 @click ="count++">count --- {{count}}</h2>
            <p>
                <!-- 绑定了parent的data里面的word -->
                <input type="text" v-model="word">
            </p>
            <button @click="show=!show">切换{{show?'显示':'隐藏'}}</button>
            <button @click="changeChildOne">通过refs  去操作子组件1</button>
            <hr>
            <childone :word="word" :count="count" ref="child1"></childone>
            <hr>
            <childtwo :show="show" ref="child2"></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>childone - 1 - 子组件1</h2>
            <h2>props --- {{word}} -- {{count}}</h2>
            <h2>num--- {{num}}</h2>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>child - 2 - 子组件2</h2>
            <div v-if="show" class="box">我是被父组件控制的</div>
        </div>
    </template>
    <script>
        Vue.component("myhead", {
            template: "<h2>头部显示数据</h2>"
        })
        Vue.component("parent",{
            // 父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。
            template:"#parent",
            data(){//必须形成闭包
                return{
                    word:"好好学习",
                    count:2000,
                    show:true,
                }
            },
            mounted(){
                //refs指向这个子组件对象
                this.$refs.one.style.color = "red"
            },
            methods: {
                changeChildOne(){
                    this.$refs.child1.num+=20;
                    this.$refs.child1.greet()
                }
            },
            components:{
                childtwo:{
                    template:"#childtwo",
                    // 把变化的值传入子组件，子组件！接受！动态的props   所以这里需要判定格式
                    props:{
                        show:Boolean,
                    }
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:[
                "word",
                "count"
            ],
            methods:{
                greet(){
                    console.log("greeting -  周末去哪里玩");
                }
            },
            data(){
                return {
                    num:2000
                }
            }
        })
        const vm = new Vue({
            data: {
                title: "父传子"
            },
            components: {
                first: {
                    template: "<h2>Vue 组件初始化</h2>"
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
            },
        }).$mount("#app")
    </script>
</body>

</html>